<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getMenuParams } from '@T2/utils/params.ts';
import { useIuserInfoStore } from '@T2/store/users.ts';
import ZutaiShow from '@T2/components/zutaiShow/index.vue';

const route = useRoute();
const dftPage = ref(null);
const showUnitSelect = ref(false);
const iuserInfoStore = useIuserInfoStore();
const { getHandleRight } = iuserInfoStore;
const strR = {
  '/P/Manage/zutai02': '326',
  '/P/Manage/zutai03': '327',
  '/P/Manage/zutai04': '328',
  '/P/Manage/zutai05': '329',
}[route.path];
const RIGHT = getHandleRight([strR]);

watch(() => route.path, (nv, ov) => {
  if (nv) {
    initZt();
  }
});

onMounted(() => {
  initZt();
});

const initZt = () => {
  const { zts } = getMenuParams(route.path);
  const [ zts0 ] = zts || [];
  if (!zts0) {
    ElMessage.error('未配置关联的组态界面！');
    return;
  }
  dftPage.value = zts0.v;
}
</script>

<template>
  <div id="menu_zt_container">
    <ZutaiShow :dftPage="dftPage" :disabled="!RIGHT[strR]" :showFunc="true" v-if="dftPage" />
  </div>
</template>

<style lang="scss" scoped>
#menu_zt_container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>